<template>
  <div>
    <!-- 轮播图区域 -->
    <!-- <mt-swipe :auto="4000">
      <mt-swipe-item v-for="(item,index) in lunbotuList" :key="index">
        <img :src="item.img">
      </mt-swipe-item>
    </mt-swipe>-->
    <swiper :lunbotuList="lunbotuList" :isfull="true"></swiper>
    <!-- 九宫格区域 -->
    <ul class="mui-table-view mui-grid-view mui-grid-9">
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
        <router-link to="/home/NewsList">
          <img src="../../img/menu1.png" alt class="imgs">
          <div class="mui-media-body">新闻列表</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
        <router-link to="/home/PhotoList">
          <img src="../../img/menu2.png" alt class="imgs">
          <div class="mui-media-body">图片分享</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
        <router-link to="/home/GoodsList">
          <img src="../../img/menu3.png" alt class="imgs">
          <div class="mui-media-body">商品购买</div>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
// import { Toast } from "mint-ui";
import swiper from "../subcponents/swiper.vue";
export default {
  data() {
    return {
      lunbotuList: []
    };
  },
  created() {
    this.getLunbotu();
  },
  methods: {
    async getLunbotu() {
      await this.$http
        .get("http://www.liulongbin.top:3005/api/getlunbo")
        .then(result => {
          if (result.data.status === 0) {
            this.lunbotuList = result.data.message;
          } else {
            Toast("数据加载失败");
          }
        });
    }
  },
  components: {
    swiper
  }
};
</script>

<style>
.imgs {
  width: 60px;
  height: 60px;
}
.mui-grid-view {
  margin: 0;
  padding: 0;
  border: none;
  background-color: white !important;
}
.mui-media-body {
  font-size: 14px !important;
}
.mui-grid-9,
.mui-table-view-cell {
  margin: 0;
  padding: 11px 15px;
  vertical-align: top;
  border: none !important;
}
</style>
